<template>
    <div class="min-h-screen">
        <el-container class="min-h-screen">
            <el-aside :width="isCollapse ? '60px' : '210px'">
                <main-menu :is-fold="isCollapse"/>
            </el-aside>
            <el-container>
                <el-header>
                    <main-header @fold-change="handleFoldChange"/>
                </el-header>
                <el-main>
                    <!-- tab导航组件 -->
                    <main-tags></main-tags>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import MainMenu from '~/components/main/main-menu.vue';
    import MainHeader from '~/components/main/main-header.vue';
    import MainTags from '~/components/main/main-tags.vue'

    const isCollapse = ref(false)
    function handleFoldChange(isFold) {
        isCollapse.value = isFold
    }
</script>

<style>
    .el-aside {
        background-color: #001529;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: left;
        cursor: pointer;
        scrollbar-width: none;
        -ms-overflow-style: none;
        transition: width 0.3s ease;
    }
    .el-header {
        background-color: #ffffff;
    }
    .el-main {
        background-color: #dadadb;
    }
</style>